<route lang="json5">
{
  style: {
    navigationBarTitleText: '商品浏览',
    navigationBarBackgroundColor: '#018d71',
    navigationBarTextStyle: 'white',
  },
}
</route>

<template>
  <view class="products-page">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-box">
        <wd-input
          v-model="searchKeyword"
          placeholder="搜索商品名称"
          clearable
          prefix-icon="search"
          @confirm="handleSearch"
          @clear="handleClearSearch"
        />
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view
          class="filter-tab"
          :class="{ active: currentSort === 'comprehensive' }"
          @click="setSort('comprehensive')"
        >
          综合
        </view>
        <view
          class="filter-tab"
          :class="{ active: currentSort === 'sales' }"
          @click="setSort('sales')"
        >
          销量
        </view>
        <view
          class="filter-tab"
          :class="{ active: currentSort === 'price' }"
          @click="setSort('price')"
        >
          价格
          <view class="price-arrows">
            <text class="arrow" :class="{ active: priceOrder === 'asc' }">↑</text>
            <text class="arrow" :class="{ active: priceOrder === 'desc' }">↓</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品瀑布流 -->
    <view class="products-container">
      <view class="waterfall-left">
        <view
          class="product-item"
          v-for="(product, index) in leftProducts"
          :key="product.id"
          @click="viewProductDetail(product)"
        >
          <view class="product-image">
            <image :src="product.image" mode="aspectFill" />
            <view class="product-tag" v-if="product.tag">{{ product.tag }}</view>
          </view>
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <text class="product-desc">{{ product.description }}</text>
            <view class="product-meta">
              <text class="product-sales">销量 {{ product.sales }}</text>
              <text class="product-rating">评分 {{ product.rating }}</text>
            </view>
            <view class="product-price-row">
              <text class="product-price">¥{{ product.price }}</text>
              <text class="product-original-price" v-if="product.originalPrice">
                ¥{{ product.originalPrice }}
              </text>
            </view>
            <view class="product-actions">
              <wd-button size="small" type="primary" @click.stop="addToCart(product)">
                加入购物车
              </wd-button>
            </view>
          </view>
        </view>
      </view>

      <view class="waterfall-right">
        <view
          class="product-item"
          v-for="(product, index) in rightProducts"
          :key="product.id"
          @click="viewProductDetail(product)"
        >
          <view class="product-image">
            <image :src="product.image" mode="aspectFill" />
            <view class="product-tag" v-if="product.tag">{{ product.tag }}</view>
          </view>
          <view class="product-info">
            <text class="product-name">{{ product.name }}</text>
            <text class="product-desc">{{ product.description }}</text>
            <view class="product-meta">
              <text class="product-sales">销量 {{ product.sales }}</text>
              <text class="product-rating">评分 {{ product.rating }}</text>
            </view>
            <view class="product-price-row">
              <text class="product-price">¥{{ product.price }}</text>
              <text class="product-original-price" v-if="product.originalPrice">
                ¥{{ product.originalPrice }}
              </text>
            </view>
            <view class="product-actions">
              <wd-button size="small" type="primary" @click.stop="addToCart(product)">
                加入购物车
              </wd-button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore">
      <wd-button type="primary" @click="loadMore" :loading="loading">加载更多</wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'

// 搜索关键词
const searchKeyword = ref('')

// 排序方式
const currentSort = ref('comprehensive')
const priceOrder = ref('asc')

// 加载状态
const loading = ref(false)
const hasMore = ref(true)

// 商品数据
const allProducts = ref([
  {
    id: 1,
    name: '红富士苹果',
    description: '新鲜采摘，甜脆可口，果肉细腻',
    price: 15.8,
    originalPrice: 19.9,
    image: '/static/images/products/apple.jpg',
    tag: '热销',
    sales: 1250,
    rating: 4.8,
  },
  {
    id: 2,
    name: '脐橙',
    description: '果肉饱满，汁多味甜，营养丰富',
    price: 12.5,
    originalPrice: null,
    image: '/static/images/products/orange.jpg',
    tag: '新品',
    sales: 890,
    rating: 4.6,
  },
  {
    id: 3,
    name: '海南香蕉',
    description: '自然成熟，香甜软糯，富含钾元素',
    price: 8.9,
    originalPrice: 12.0,
    image: '/static/images/products/banana.jpg',
    tag: null,
    sales: 2100,
    rating: 4.7,
  },
  {
    id: 4,
    name: '巨峰葡萄',
    description: '颗粒饱满，甜度适中，果皮薄',
    price: 25.6,
    originalPrice: null,
    image: '/static/images/products/grape.jpg',
    tag: '限时',
    sales: 680,
    rating: 4.9,
  },
  {
    id: 5,
    name: '丹东草莓',
    description: '新鲜采摘，酸甜可口，维生素C丰富',
    price: 35.8,
    originalPrice: 45.0,
    image: '/static/images/products/strawberry.jpg',
    tag: '特价',
    sales: 420,
    rating: 4.5,
  },
  {
    id: 6,
    name: '海南芒果',
    description: '果肉细腻，香甜浓郁，口感极佳',
    price: 18.9,
    originalPrice: null,
    image: '/static/images/products/mango.jpg',
    tag: null,
    sales: 950,
    rating: 4.8,
  },
  {
    id: 7,
    name: '新疆香梨',
    description: '皮薄肉厚，香甜多汁，清脆爽口',
    price: 22.5,
    originalPrice: 28.0,
    image: '/static/images/products/pear.jpg',
    tag: '推荐',
    sales: 750,
    rating: 4.7,
  },
  {
    id: 8,
    name: '山东大樱桃',
    description: '果大肉厚，甜酸适中，营养丰富',
    price: 45.0,
    originalPrice: 55.0,
    image: '/static/images/products/cherry.jpg',
    tag: '精品',
    sales: 320,
    rating: 4.9,
  },
  {
    id: 9,
    name: '广西砂糖橘',
    description: '皮薄易剥，甜度极高，无籽多汁',
    price: 16.8,
    originalPrice: null,
    image: '/static/images/products/orange2.jpg',
    tag: '热卖',
    sales: 1100,
    rating: 4.6,
  },
  {
    id: 10,
    name: '云南蓝莓',
    description: '果肉细腻，酸甜可口，富含花青素',
    price: 38.5,
    originalPrice: 48.0,
    image: '/static/images/products/blueberry.jpg',
    tag: '有机',
    sales: 280,
    rating: 4.8,
  },
])

// 过滤和排序后的商品
const filteredProducts = computed(() => {
  let products = [...allProducts.value]

  // 搜索过滤
  if (searchKeyword.value) {
    products = products.filter((product) =>
      product.name.toLowerCase().includes(searchKeyword.value.toLowerCase()),
    )
  }

  // 排序
  switch (currentSort.value) {
    case 'sales':
      products.sort((a, b) => b.sales - a.sales)
      break
    case 'price':
      if (priceOrder.value === 'asc') {
        products.sort((a, b) => a.price - b.price)
      } else {
        products.sort((a, b) => b.price - a.price)
      }
      break
    case 'comprehensive':
    default:
      // 综合排序：销量 * 评分
      products.sort((a, b) => b.sales * b.rating - a.sales * a.rating)
      break
  }

  return products
})

// 瀑布流布局：将商品分为左右两列
const leftProducts = computed(() => {
  return filteredProducts.value.filter((_, index) => index % 2 === 0)
})

const rightProducts = computed(() => {
  return filteredProducts.value.filter((_, index) => index % 2 === 1)
})

// 设置排序方式
const setSort = (sortType: string) => {
  if (sortType === 'price') {
    // 价格排序时切换升序/降序
    priceOrder.value = priceOrder.value === 'asc' ? 'desc' : 'asc'
  }
  currentSort.value = sortType
}

// 搜索处理
const handleSearch = () => {
  console.log('搜索关键词:', searchKeyword.value)
  // 这里可以添加搜索逻辑
}

// 清除搜索
const handleClearSearch = () => {
  searchKeyword.value = ''
}

// 查看商品详情
const viewProductDetail = (product: any) => {
  uni.navigateTo({
    url: `/pages/product/detail?id=${product.id}`,
  })
}

// 加入购物车
const addToCart = (product: any) => {
  uni.showToast({
    title: `${product.name}已加入购物车`,
    icon: 'success',
  })
}

// 加载更多
const loadMore = () => {
  loading.value = true
  setTimeout(() => {
    // 模拟加载更多数据
    const newProducts = [
      {
        id: 11,
        name: '进口奇异果',
        description: '新西兰进口，酸甜可口，营养丰富',
        price: 32.0,
        originalPrice: 40.0,
        image: '/static/images/products/kiwi.jpg',
        tag: '进口',
        sales: 180,
        rating: 4.7,
      },
      {
        id: 12,
        name: '泰国山竹',
        description: '果肉雪白，香甜多汁，口感细腻',
        price: 28.5,
        originalPrice: null,
        image: '/static/images/products/mangosteen.jpg',
        tag: '进口',
        sales: 150,
        rating: 4.6,
      },
    ]
    allProducts.value.push(...newProducts)
    loading.value = false
    hasMore.value = false // 模拟没有更多数据
  }, 1000)
}

// 监听搜索关键词变化
watch(searchKeyword, (newVal) => {
  console.log('搜索关键词变化:', newVal)
})

onMounted(() => {
  console.log('商品浏览页面加载完成')
})
</script>

<style lang="scss" scoped>
.products-page {
  background-color: #f8f8f8;
  min-height: 100vh;
}

// 搜索栏样式
.search-section {
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;

  .search-box {
    :deep(.wd-input) {
      background: #f5f5f5;
      border-radius: 20px;
      border: none;
    }
  }
}

// 筛选栏样式
.filter-section {
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;

  .filter-tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .filter-tab {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      border-radius: 16px;
      font-size: 14px;
      color: #666;
      transition: all 0.3s ease;

      &.active {
        background: #018d71;
        color: #fff;
      }

      .price-arrows {
        display: flex;
        flex-direction: column;
        margin-left: 4px;

        .arrow {
          font-size: 10px;
          line-height: 1;
          color: #ccc;

          &.active {
            color: #fff;
          }
        }
      }
    }
  }
}

// 商品瀑布流容器
.products-container {
  display: flex;
  padding: 8px;
  gap: 8px;

  .waterfall-left,
  .waterfall-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .product-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .product-image {
      position: relative;
      width: 100%;
      height: 160px;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }

      .product-tag {
        position: absolute;
        top: 8px;
        right: 8px;
        background: #ff4757;
        color: #fff;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
      }
    }

    .product-info {
      padding: 12px;

      .product-name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        display: block;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .product-desc {
        font-size: 12px;
        color: #666;
        display: block;
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .product-meta {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;

        .product-sales,
        .product-rating {
          font-size: 11px;
          color: #999;
        }
      }

      .product-price-row {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .product-price {
          font-size: 16px;
          font-weight: 600;
          color: #ff4757;
          margin-right: 8px;
        }

        .product-original-price {
          font-size: 12px;
          color: #999;
          text-decoration: line-through;
        }
      }

      .product-actions {
        :deep(.wd-button) {
          width: 100%;
          height: 32px;
          font-size: 12px;
          border-radius: 6px;
        }
      }
    }
  }
}

// 加载更多样式
.load-more {
  padding: 20px;
  text-align: center;

  :deep(.wd-button) {
    width: 200px;
  }
}

// 响应式设计
@media (max-width: 375px) {
  .products-container {
    padding: 4px;
    gap: 4px;

    .waterfall-left,
    .waterfall-right {
      gap: 4px;
    }
  }
}
</style>
